import React, {
	Component
} from 'react';
import {
	observer,
} from 'mobx-react';
import {
	withRouter
} from 'react-router-dom';
import {
	RouteLayout
} from 'weaver-mobile-page';
import {
	List,
} from "weaver-mobile";
const Item = List.Item;
const Brief = Item.Brief;

@withRouter
@observer
export default class WorkFlow extends Component {
	componentWillUnmount() {
		const {
			changeTitle,
			mainTitle
		} = this.props.store;

		changeTitle(mainTitle);
	}
	
	render() {
		const {
			store
		} = this.props, {
			leaveWorkflowInfo,
			openWorkflow,
		} = store;

		return (
			<RouteLayout>
				<div key="wmPoutePageDemo" className="wm-route-layout wm-demo-route-layout-page attendance-leaveDetail">
					<List>
						{
							leaveWorkflowInfo.map(item => {
								const {label, period, requestId} = item;
								
								return (
									<Item arrow="horizontal" key={requestId} multipleLine onClick={()=>openWorkflow(requestId)}>
							          {label} <Brief>{period}</Brief>
							        </Item>
								)
							})
						}
					</List>
				</div>
			</RouteLayout>
		);
	}	
}